<template>
  <div class="content">
    <div class="top">
      <p>{{ Data?.name }}</p>
      <div class="btn-text">
        {{ Data?.create_date }}
      </div>
    </div>
    <div class="bottom">
      <div class="img-content">
        <img v-if="Data?.img" :src="base64Img(Data.img)" alt="" srcset="">
      </div>
      <div v-html="Data?.webText"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'; // 导入路由实例
import { getNewsContent } from '../api/api/ProducView.js'
import { base64Img } from '../tools/tools.js'
const route = useRoute();

// 从查询参数中提取数据
const newsId = ref(route.query.newsId);
const checkData = ref(route.query.checkData);
const Data = ref()

const __getNewsContent = (newsId, checkData) => {
  getNewsContent(newsId, checkData).then((res) => {
    console.log('页面数据', res);
    Data.value = res.data.value
  })
}

onMounted(() => {
  __getNewsContent(newsId.value, checkData.value)
});

</script>

<style lang="scss" scoped>
// 取消显示手机端 显示pc端
@media (min-width: 800px) {
  .content {
    .top {
      width: 1200px;
      margin: 0 auto;
      text-align: center;

      border-bottom: 1px solid gainsboro;
      padding: 10px 0;

      p {
        line-height: 60px;
        font-size: 30px;
        font-weight: 700;

      }

      .btn-text {
        font-size: 16px;

      }

    }

    .bottom {
      padding: 20px 60px;
      width: 1200px;
      margin: 0 auto;

      .img-content {
        display: flex;
        justify-content: center;
        img {
          max-width: 900px;
        }
      }

    }
  }
}

// 取消显示pc端 显示手机端
@media screen and (max-width: 799px) {
  .content {
    padding: 20px;
    .top {
      width: 100%;
      text-align: center;

      p {
        font-size: 20px;
        font-weight: 600;
      }
      .btn-text {
        text-align: center;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid gainsboro;
      }
    }
    .bottom {
      .img-content {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
      }
    }
  }
}
</style>